<template>
  <div class="stats-container">
    <div class="stat-card student">
      <div class="stat-icon">
        <i class="el-icon-user"></i>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ studentCount }}</div>
        <div class="stat-label">学生总数</div>
      </div>
      <div class="stat-trend">
        <span class="trend-icon up">
          <i class="el-icon-top"></i>
        </span>
        <span class="trend-value">+{{ newStudents }}</span>
      </div>
      <div class="stat-wave"></div>
    </div>
    
    <div class="stat-card certificate">
      <div class="stat-icon">
        <i class="el-icon-document"></i>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ certificateCount }}</div>
        <div class="stat-label">证书总数</div>
      </div>
      <div class="stat-trend">
        <span class="trend-icon up">
          <i class="el-icon-top"></i>
        </span>
        <span class="trend-value">+{{ newCertificates }}</span>
      </div>
      <div class="stat-wave"></div>
    </div>
    
    <div class="stat-card pending">
      <div class="stat-icon">
        <i class="el-icon-time"></i>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ pendingCount }}</div>
        <div class="stat-label">待处理</div>
      </div>
      <div class="stat-trend">
        <span class="trend-icon neutral">
          <i class="el-icon-right"></i>
        </span>
        <span class="trend-value">0</span>
      </div>
      <div class="stat-wave"></div>
    </div>
    
    <div class="stat-card success">
      <div class="stat-icon">
        <i class="el-icon-success"></i>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ verifiedCount }}</div>
        <div class="stat-label">已验证证书</div>
      </div>
      <div class="stat-trend">
        <span class="trend-icon up">
          <i class="el-icon-top"></i>
        </span>
        <span class="trend-value">+{{ recentVerified }}</span>
      </div>
      <div class="stat-wave"></div>
    </div>
  </div>
</template>

<script>
import { computed, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import LogService from '@/store/logService'

export default {
  name: 'DashboardStats',
  setup() {
    const store = useStore()
    
    // 从store获取数据
    const studentCount = computed(() => store.state.students.length)
    const certificateCount = computed(() => store.state.certificates.length)
    
    // 获取证书验证的统计数据
    const verifiedCount = ref(0)
    const recentVerified = ref(0)
    
    // 其他模拟数据（实际应用中从后端获取）
    const newStudents = ref(5)
    const newCertificates = ref(8)
    const pendingCount = ref(3)
    
    // 计算已验证证书的数量
    const calculateVerifiedCount = () => {
      const allLogs = LogService.getLogs()
      
      // 获取所有验证成功的日志
      const verificationSuccessLogs = allLogs.filter(log => 
        log.type === 'certificate' && 
        log.action === '证书验证成功'
      )
      
      // 设置已验证证书总数
      verifiedCount.value = verificationSuccessLogs.length
      
      // 计算今天验证成功的数量
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      const todayTimestamp = today.getTime()
      
      const recentSuccessLogs = verificationSuccessLogs.filter(log => 
        log.timestamp >= todayTimestamp
      )
      
      recentVerified.value = recentSuccessLogs.length
    }
    
    onMounted(() => {
      // 计算初始统计
      calculateVerifiedCount()
      
      // 设置定时器，每分钟更新一次统计
      const intervalId = setInterval(calculateVerifiedCount, 60000)
      
      // 组件销毁时清除定时器
      return () => {
        clearInterval(intervalId)
      }
    })
    
    return {
      studentCount,
      certificateCount,
      newStudents,
      newCertificates,
      pendingCount,
      verifiedCount,
      recentVerified
    }
  }
}
</script>

<style scoped>
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 24px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.stat-card.student {
  background: linear-gradient(135deg, rgba(100, 130, 255, 0.08), rgba(100, 130, 255, 0.01));
  border-top: 3px solid #4d72ff;
}

.stat-card.certificate {
  background: linear-gradient(135deg, rgba(255, 141, 97, 0.08), rgba(255, 141, 97, 0.01));
  border-top: 3px solid #ff8d61;
}

.stat-card.pending {
  background: linear-gradient(135deg, rgba(255, 196, 0, 0.08), rgba(255, 196, 0, 0.01));
  border-top: 3px solid #ffc400;
}

.stat-card.success {
  background: linear-gradient(135deg, rgba(23, 201, 100, 0.08), rgba(23, 201, 100, 0.01));
  border-top: 3px solid #17c964;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 70%);
  z-index: 0;
}

.stat-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.05), transparent);
  transform-origin: bottom;
  animation: waveAnimation 8s ease-in-out infinite;
}

@keyframes waveAnimation {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.4);
  }
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  font-size: 24px;
  margin-right: 18px;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.student .stat-icon {
  background: linear-gradient(135deg, #4d72ff, #6c60fd);
  color: white;
}

.certificate .stat-icon {
  background: linear-gradient(135deg, #ff8d61, #fd6c93);
  color: white;
}

.pending .stat-icon {
  background: linear-gradient(135deg, #ffc400, #ff9b26);
  color: white;
}

.success .stat-icon {
  background: linear-gradient(135deg, #17c964, #0ec0b8);
  color: white;
}

.stat-icon i {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.stat-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1;
  letter-spacing: -0.5px;
  transition: all 0.3s;
}

.student .stat-value {
  background: linear-gradient(to right, #4d72ff, #6c60fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.certificate .stat-value {
  background: linear-gradient(to right, #ff8d61, #fd6c93);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pending .stat-value {
  background: linear-gradient(to right, #ffc400, #ff9b26);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.success .stat-value {
  background: linear-gradient(to right, #17c964, #0ec0b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-card:hover .stat-value {
  transform: translateY(-2px);
}

.stat-label {
  font-size: 14px;
  color: #606266;
  opacity: 0.8;
  transition: all 0.3s;
}

.stat-card:hover .stat-label {
  opacity: 1;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 13px;
  position: relative;
  z-index: 1;
  margin-left: 12px;
  transition: all 0.3s;
}

.stat-card:hover .stat-trend {
  transform: scale(1.05);
}

.trend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 6px;
  transition: all 0.3s;
}

.trend-icon.up {
  background-color: rgba(23, 201, 100, 0.15);
  color: #17c964;
}

.trend-icon.down {
  background-color: rgba(242, 63, 63, 0.15);
  color: #f23f3f;
}

.trend-icon.neutral {
  background-color: rgba(255, 196, 0, 0.15);
  color: #ffc400;
}

.trend-value {
  font-weight: 600;
  letter-spacing: -0.5px;
  transition: all 0.3s;
}

.student .trend-value {
  color: #4d72ff;
}

.certificate .trend-value {
  color: #fd6c93;
}

.pending .trend-value {
  color: #ff9b26;
}

.success .trend-value {
  color: #17c964;
}

@media (max-width: 768px) {
  .stats-container {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
}
</style> 